<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字（1-100）</title>
</head>
<body>
    <h1>猜数字游戏</h1>
    <input type="text" class="input-box">
    <input type="button" class="confirm-btn" value="确定">
    <script>
        // 1. 获取元素
        let inputBox = document.querySelector('.input-box')
        let confirmBtn = document.querySelector('.confirm-btn')
        let randomNum = parseInt(Math.random() * 100 + 1)
        console.log(randomNum)

        // 3. 点击确定按钮，执行操作2
        confirmBtn.onclick = function(){
            // 2. 拿输入框的值与randomNum进行比较，要提示猜大了、猜小了、猜中了
            let inputVal = Number(inputBox.value) 
            if(inputVal > randomNum) {
                alert('猜大了')
            } else if(inputVal < randomNum) {
                alert('猜小了')
            } else if(inputVal === randomNum) {
                alert('猜中了')
            } else{
                alert('请遵守游戏规则')
            }
        }

    </script>
</body>
</html>